<template>
    <div class="reply-comment-item normal-text after-line">
        <!-- 用户信息 -->
        <div class="comment-header clearfix">
            <img class="avatar" mode="aspectFill" :src="comment.avatar" />
            <div class="name">{{comment.nickname}}</div>
        </div>
        <div class="content">
            {{comment.content}}
        </div>
    </div>
</template>

<script lang="js">

export default {
    name: 'CommentItem',
    props: {
        comment: {
            type: Object,
        },
    },
};
</script>

<style lang="less">
@import '../../lib/style/mixins.less';
.reply-comment-item {
    position: relative;
    padding: 10px;
    background-color: @white-color;
    .comment-header {
        display: flex;
        align-items: center;
        .avatar {
            width: 68rpx;
            height: 68rpx;
            border-radius: 50%;
            margin-right: 10px;
        }
    }
    .content{
        margin-top: 10px;
    }
}
</style>